{% extends 'manage/base_manage.html' %}
{% load static %}
{% block title %}产品中心{% endblock %}

{% block css %}
    <link rel="stylesheet" href="{% static 'css/product/product_manage.css' %}">
{% endblock %}

{% block content %}
    <div class="content">
        <div id="product_content">
            <!--列表栏-->
            <h3 id="add_product_name">产品列表</h3>
            <a id="add_product" href="{% url 'atp:product_add' %}">＋添加产品</a>
            <div id="search_p">
                <form method="get" action="{% url 'atp:product_search' %}">
                    {% csrf_token %}
                    <div class="form-group">
                        <br><br>
                        <input name="product_name" type="search" class="form-control"
                               placeholder="输入产品名称">
                        <button type="submit" id="search_b" class="btn btn-default">搜索</button>
                    </div>
                </form>
            </div>
            <!--列表-->
            <form method="post" action="{% url 'atp:product_manage' %}">
                {% csrf_token %}
                <table class="table-striped" id="table_list">
                    <thead>
                    <tr id="tr_title">
                        <th id="table_title_length">ID</th>
                        <th id="table_title_length2">产品名称</th>
                        <th id="table_title_length2">产品描述</th>
                        <th id="table_title_length3">产品负责人</th>
                        <th id="table_title_length3">时间</th>
                        <th id="table_title_length">编辑</th>
                        <th id="table_title_length">删除</th>
                    </tr>
                    </thead>
                    <tbody>
                    {% for product in products %}
                        <tr id="tr_d">
                            <td>{{ product.id }}</td>
                            <td>{{ product.product_name }}</td>
                            <td>{{ product.product_desc }}</td>
                            <td>{{ product.product_er }}</td>
                            <td>{{ product.create_time }}</td>
                            <td>
                                <a style="color: cadetblue"
                                   href="{% url 'atp:product_update' product.id %}">编辑
                                </a>
                            </td>
                            <td><a style="color: #cc0000" href="#" onclick="btn_delete({{ product.id }})">删除</a>
                            </td>
                        </tr>
                    {% endfor %}
                    </tbody>
                </table>
            </form>
            <!--分页-->
            <div id="pager">
                <nav aria-label="Page navigation">
                    <ul class="pagination">
                        {% if products.has_previous %}
                            <li>
                                <a href="{% url 'atp:product_search' %}?&product_name={{ search_name }}&page={{ products.previous_page_number }}"
                                   aria-label="Previous">
                                    <span aria-hidden="true">&laquo;</span>
                                </a>
                            </li>
                        {% else %}
                            <li class="disabled">
                                <a href="#" aria-label="Next">
                                    <span aria-hidden="true">&raquo;</span>
                                </a>
                            </li>
                        {% endif %}

                        {% for page_index in products.paginator.page_range %}
                            {% ifequal page_index  products.number %}
                                <li class="active">
                                    <a style="background: cadetblue"
                                       href="?product_name={{ search_name }}&page={{ page_index }}">{{ page_index }}</a>
                                </li>
                            {% else %}
                                <li>
                                    <a href="?product_name={{ search_name }}&page={{ page_index }}">{{ page_index }}</a>
                                </li>
                            {% endifequal %}
                        {% endfor %}

                        {% if products.has_next %}
                            <li>
                                <a href="{% url 'atp:product_search' %}?product_name={{ search_name }}&page={{ products.next_page_number }}"
                                   aria-label="Next">
                                    <span aria-hidden="true">&raquo;</span>
                                </a>
                            </li>
                        {% else %}
                            <li class="disabled">
                                <a href="#" aria-label="Next">
                                    <span aria-hidden="true">&raquo;</span>
                                </a>
                            </li>
                        {% endif %}
                    </ul>
                </nav>
            </div>
        </div>
    </div>
{% endblock %}

{% block js %}
    <script>
        toastr.options = {
            closeButton: true,
            timeOut: "500",
            positionClass: "toast-center-center",
        };

        function btn_delete(product_id) {
            layer.open({
                title: "是否确认删除?",
                btn: ['确定', '取消'],
                yes: function () {
                    $.ajax({
                        url: "{% url 'atp:product_delete' %}",
                        type: "GET",
                        dataType: "JSON",
                        data: {"product_id": product_id},
                        success: function (res) {
                            if (res.code === 200) {
                                layer.msg('删除成功');
                                setTimeout(function () {
                                    parent.location.reload();
                                }, 1000);
                            } else if (res.code === 201) {
                                toastr.success('删除失败');
                                setTimeout(function () {
                                    parent.location.reload();
                                }, 1000);
                            }
                        }
                    })
                }
            })
        }
    </script>
{% endblock %}